<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
    </style>
</head>
<body>
    <div id="app">
        <h4>插值表达式语法</h4>
        <ol>
            <li>vue仓库变量数据
                <p>num:{{ num }}</p>
            </li>
            <li>遵循JS语法规范的匿名变量定义
                <p>匿名字符串:{{ "string" }}</p>
                <p>匿名字符串:{{ 'string' }}</p>
                <!-- 模板字符串中的${}语法取值范围为vue的数据仓库，如果仓库不存在该数据输出undefined字符串 -->
                <p>匿名字符串:{{ `string-${msg}` }}</p>
                <p>匿名数值:{{ 200 }}</p>
                <p>匿名布尔值:{{ true }}</p>
                <p>匿名时间对象:{{ new Date() }}</p>
                <p>匿名数组:{{ [1,2,3,4,5,6] }}</p>
                <p>匿名set:{{ new Set([1,2,3,4,5,6]) }}</p>
                <!-- 
                    [Vue warn]: Template compilation error …… 
                    上述错误指的就是vue模板语法错误
                -->
                <!-- 匿名对象定义时必须将插值表达式语法和对象定义语法之间进行明确的分割符分割 -->
                <!-- <p>匿名字面量对象:{{{ name:"tom",age:23 }}}</p> -->
                <p>匿名字面量对象:{{({ name:"tom",age:23 })}}</p>
                <p>匿名字面量对象:{{ { name:"tom",age:23 } }}</p>
            </li>
            <li>执行简单JS表达式(四则运算、逻辑运算、三目运算……)
                <p>num*2:{{ num*2 }}</p>
                <p>num+100:{{ num+100 }}</p>
                <p>msg:{{ "变量msg的值是:"+msg }}</p>
                <p>msg:变量msg的值是:{{ msg }}</p>
                <p>flag&&false:{{ flag&&false }}</p>
                <p>三目运算:{{ flag?'是':'否' }}</p>
                <!-- 成员访问运算符 . [] ; 数组元素，对象属性，数组或则对象原型方法或属性 -->
                <p>arr[1]:{{ arr[1] }}</p>
                <p>user.name:{{ user.name }}</p>
                <p>user['age']:{{ user['age'] }}</p>
                <!-- []成员方法填充的数据如果是变量，变量在vue环境下取值为仓库变量 -->
                <p>user[key]:{{ user[key] }}</p>
                <input type="button" value="切换属性" v-on:click="changeKey()">
                <p>arr元素数量:{{ arr.length }}</p>
                <p>arr中是否存在22:{{ arr.indexOf(22) }}</p>
                <p>arr中是否存在22:{{ arr.includes(22) }}</p>
                <p>set中是否存在22:{{ set.has(22) }}</p>
            </li>
            <li>JS的内置功能对象(JSON、Math……)【一般指的是JS中具有常量功能的对象】
                <!-- 
                    const GLOBALS_WHITE_LISTED = 
                        'Infinity,undefined,NaN,isFinite,isNaN,parseFloat,parseInt,decodeURI,' +
                        'decodeURIComponent,encodeURI,encodeURIComponent,Math,Number,Date,Array,' +
                        'Object,Boolean,String,RegExp,Map,Set,JSON,Intl,BigInt';
                 -->
                <p>Math.PI:{{ Math.PI }}</p>
            </li>
        </ol>
    </div>
    <script>
        var msg= "浏览器全局变量";
    </script>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";

        createApp({
            data(){
                return {
                    num:1000,
                    msg:"vue仓库数据",
                    flag:true,
                    arr:[11,22,33,44,55],
                    set:new Set([11,22,33,44,55]),
                    key:"age",
                    user:{
                        name:"tom",
                        age:23
                    }
                }
            },
            methods:{
                changeKey(){
                    this.key = (this.key=="age"?"name":"age")
                }
            }
        }).mount("#app")

    </script>
</body>
</html>